{% extends "sitebase.html" %}	
{% block title %}Berkeley Campus Energy Portal{% endblock %}

{% block extra_scriptsCSS_imports %}
		<script type="text/javascript" src="/site-media/jquery-mousewheel/jquery.mousewheel.js"></script>
		<script type="text/javascript" src="/site-media/jquery-zoomable/jquery.zoomable.js"></script>



{% endblock %}

{% block extra_css_inline %}
   			footer {
				margin-top: 0px;
			}
{% endblock %}

{% block extra_scripts_inline %}
	$(document).ready(function(){
		$('input:button').button();
		$('#image').zoomable();
		$('#image').zoomable('zoomOut');
		$("#dialog").dialog({ height: window.innerHeight-250, autoOpen: false, minWidth: 150, position: 'right' });
	});
	///FYI there are more scripts at the bottom in the random_extras block
{% endblock %}




{% block menu_1 %} class="active" {% endblock %}

{% block header_title %}
Campus Map
{% endblock %}

{% block header_subtitle %}
<span style="color:#808080;">Click a <span style="background-color:#e1dd6d;">highlighted</span> building to view energy usage information.</span>
{% endblock %}


{% block content_inside %}
			<div class="row">
				<div class="span16">
					<div style="text-align:right;position:right;margin-bottom:5px;margin-top:-10px;margin-bottom:12px;"><span id="buildingName" style="float:left;text-align:left;position:left;"><h3></h3></span><span style="width:64%;position:right;">
						<input class="btn small primary" type="button" value="Zoom in" onclick="$('#image').zoomable('zoomIn')" title="Zoom in" />
						<input class="btn small primary" type="button" value="Zoom out" onclick="$('#image').zoomable('zoomOut')" title="Zoom out" />
						<input class="btn small primary" type="button" value="Reset" id="reset" />
						<input class="btn small primary" type="button" style="width:150px;" value="Popup Building List" id="listb" />
						<input class="btn small primary" type="button" style="width:150px;" value="Close Building List" id="listb2" />
					</span>
					</div> 
					<div id="zoomablemap" style="overflow:hidden;width:938px;height:680px;position:relative;border-style:solid;border-width:2px;-webkit-border-radius: 4px 4px 4px 4px;-moz-border-radius: 4px 4px 4px 4px;border-radius: 4px 4px 4px 4px;-webkit-box-shadow: 0 1px 24px rgba(0,0,0,.55);-moz-box-shadow: 0 1px 24px rgba(0,0,0,.55);box-shadow: 0 1px 24px rgba(0,0,0,.55);">
						<img src="/site-media/campusmap.png" width="1232" height="1067" style="border:0;" alt="campusmap" usemap="#map" id="image" />
						<map id="map" name="map">
						<!-- coordinates stored in the db were obtained using the following: -->
							<!-- #$-:Image map file created by GIMP Image Map plug-in -->
							<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
							<!-- #$-:Please do not edit lines starting with "#$" -->
							<!-- #$VERSION:2.3 -->
							<!-- #$AUTHOR:sagark  -->
						<!-- end cooordinates were obtained -->

						<!-- generates imagemap from coordinates stored in database -->
						
						{% for building in buildings|dictsort:"longname" %}
							<area shape="poly" coords="{{ building.map_coords }}" href="/buildings/{{ building.shortname }}/" alt="{{ building.shortname }}" onmouseover="dispName('{{ building.longname }}')" onmouseout="hideName()" />
						{% endfor %}

						</map>
					</div>
				</div>
			</div>
{% endblock %}

{% block random_extras %}
	<div id="dialog" title="Building List" style="text-align:left;">
		<ul>
			{% for building in buildings|dictsort:"longname" %}
			<li><a href="/buildings/{{building.shortname}}">{{ building }}</a></li>
			{% endfor %}
		</ul>
	</div>
	

<script type="text/javascript">

function dispName(buildingname) {
	$('#buildingName').hide();
	mod = document.getElementById('buildingName');
	mod.innerHTML = "<h3>" + buildingname + "</h3>";
	$('#buildingName').fadeIn('fast');
}

function hideName() {
	$('#buildingName').hide();
	mod = document.getElementById('buildingName');
	mod.innerHTML = ""
}

	$("#listb").click(function(){
		$("#dialog").dialog("open");
	});
	$("#listb2").click(function(){
		$("#dialog").dialog("close");
	});
	$("#reset").click(function(){
		$('#image').zoomable('reset');
		$('#image').zoomable('zoomOut');
	});
	if (!$.browser.mozilla) {
		$('#zoomablemap').bind('mousewheel', function(e, delta){
			if (delta < 0){
				$('#image').zoomable('zoomOut');
			}
			if (delta > 0){
				$('#image').zoomable('zoomIn');
			} 
		}); 
	}
</script>

{% endblock %}

